<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="content">职位{{job_id?'编辑':'新增'}}</block>
		</cu-custom>
		
		<view>
			<view class="apply_boxone">
				<view>职位详情</view>
			</view>
			<view class="apply_box flex">
				<view class="con_text">职位名称</view>
				<input class="con_infom" placeholder="请输入职位名称" v-model="job_name" />
			</view>
			<view class="apply_box flex">
				<view class="con_text">工作地区</view>
				<input class="con_infom" placeholder="请输入工作地区" v-model="city"/>
			</view>
			<view class="apply_box flex">
				<view class="con_text">工作经验要求</view>
				<input class="con_infom" placeholder="请输入经验要求" v-model="workage"/>
			</view>
			<view class="apply_box flex">
				<view class="con_text">上班时间</view>
				<view class="con_infom">
					<!-- <picker mode="time" :value="start_work_time" start="09:01" end="21:01" @change="bindstart_work_timeChange">
						<view class="uni-input">{{start_work_time||'点击时间选择'}}</view>
					</picker> -->
					<picker mode="time" :value="start_work_time" start="00:00" end="23:59" @change="bindstart_work_timeChange">
						<view class="uni-input">{{start_work_time||'点击时间选择'}}</view>
					</picker>
				</view>
			</view>
			<view class="apply_box flex">
				<view class="con_text">下班时间</view>
				<view class="con_infom">
					<!-- <picker mode="time" :value="end_work_time" start="09:01" end="21:01" @change="bindend_work_timeChange">
						<view class="uni-input">{{end_work_time||'点击时间选择'}}</view>
					</picker> -->
					<picker mode="time" :value="end_work_time" start="00:00" end="24:00" @change="bindend_work_timeChange">
						<view class="uni-input">{{end_work_time||'点击时间选择'}}</view>
					</picker>
				</view>
			</view>
			<view class="apply_box flex">
				<view class="con_text">学历要求</view>
				<input class="con_infom" placeholder="请输入学历要求" v-model="qualifications"/>
			</view>
	
			<view class="describe_box">
				<view class="con_text">职位要求</view>
				<textarea maxlength="-1" placeholder="请输入职位要求" class="textarea_box" :disabled="modalName?true:false" v-model="describe"></textarea>
			</view>
			<view class="describe_box">
				<view class="con_text">任职要求</view>
				<textarea maxlength="-1" placeholder="请输入任职要求" class="textarea_box" :disabled="modalName?true:false" v-model="requirements" style="overflow-y: auto;"></textarea>
			</view>
			
			<view class="addBox">
				
				<view class="add_box flex">
					<view class="tag_text">职位标签</view>
					<view class="con_infom add_tag" @tap="showAddModel" data-target="bottomModal">+添加</view>
				</view>
				
				<view class="tag_btn"><!-- 标签 -->
					<view v-for="(item,index) in tags" :key="inde" class="tagBox flex" @tap="removeTag(index)">
						<view class="tag_box">{{item}}</view>
						<view class="close_box cuIcon-close"></view>
					</view>
				</view>
			</view>
			<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
				<view class="cu-dialog">
					<view class="modal_box">
						<view class="control_box flex">
							<view class="apply_text">职位标签</view>
							<text class="cancel_text iconfont icon-guanbi" @tap="closModal"></text>
						</view>
						<view class="imput_information">
							
							<view class="input_box flex">
								<text class="linkman">职位标签</text>
								<input placeholder="请填写标签" style="margin-left: 58rpx; text-align: left;" v-model="tag_name"/>
							</view>
							<view>
								<button class="button_apply" @tap="addTag">确定</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 200rpx;"></view>
		
		<view class="cu-bar tabbar bg-white foot">
			<button class="cancel_but" @tap="cancel()">取消</button>
			<button class="submit_but" @tap="submit()">提交</button>	
		</view>
	</view>
</template>

<script>
	const {appLogin,httpGet,httpPost} = require("@/utils/common.js")
	export default {
		data() {
			return {
				modalName: null,
				job_name:'',
				city:'',
				workage:'',
				qualifications:'',
				tags:[],
				tag_name:'',
				describe:'',
				requirements:'',
				job_id:0,
				start_work_time:'',
				end_work_time:''
			}
		},
		onLoad(option) {
			appLogin((user_info)=>{
				console.log(user_info)
				if(option.job_id)this.job_id = option.job_id
				console.log(this.job_id)
				if(this.job_id>0){
					this.diaplay()
				}
			})
		},
		methods: {
			 bindstart_work_timeChange: function(e) {
			            this.start_work_time = e.target.value
			        },
			bindend_work_timeChange: function(e) {
			           this.end_work_time = e.target.value
			       },		
			diaplay(){
					httpGet({
						url:'/api/company/job_info',
						data:{
							job_id:this.job_id,
							}
					}).then((res) => {
						console.log(res)
						this.end_work_time = res.result.end_work_time
						this.start_work_time = res.result.start_work_time
						this.job_id = res.result.job_id
						this.job_name = res.result.job_name
						this.city = res.result.city
						this.workage = res.result.workage
						this.qualifications = res.result.qualifications
						this.tags = res.result.tags.splice(',')
						this.describe = res.result.describe
						this.requirements = res.result.requirements
					})
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				if(!this.tags||this.tags==''){
					uni.showToast({
						title:'请输入职位标签',
						icon:'none',
						duration: 2000
					});
					return;
				}
				console.log(this.tags)
				this.tags = this.tags.split(',')
				this.modalName = null
			},
			closModal(e){
				this.modalName = null
			},
			showAddModel(e){
				this.tag_name = ""
				this.showModal(e)
			},
			addTag(){
				this.tags.push(this.tag_name);
				this.closModal()
			},
			removeTag(index){
				console.log(index)
				this.tags.splice(index,1)
			},
			cancel(){
				uni.navigateBack()
			},
			submit(){
				if(!this.job_name){
					uni.showToast({
						title:'请输入职位名称',
						icon:'none',
						duration: 2000
					});
					return;
				}
				if(!this.city){
					uni.showToast({
						title:'请输入工作地区！',
						icon:'none',
						duration: 2000
					});
					return;
				}
				if(!this.workage){
					uni.showToast({
						title:'请输入经验要求！',
						icon:'none',
						duration: 2000
					});
					return;
				}
				if(!this.qualifications){
					uni.showToast({
						title:'请输入学历要求！',
						icon:'none',
						duration: 2000
					});
					return;
				}
				if(!this.describe){
					uni.showToast({
						title:'请输入职位描述',
						icon:'none',
						duration: 2000
					});
					return;
				}
				if(!this.requirements){
					uni.showToast({
						title:'请输入任职要求',
						icon:'none',
						duration: 2000
					});
					return;
				}
				if(!this.tags){
					uni.showToast({
						title:'请输入职位标签',
						icon:'none',
						duration: 2000
					});
					return;
				}
				httpPost({
					url:'/api/company/job_save',
					data:{
						job_id:this.job_id,
						job_name:this.job_name,
						city:this.city,
						workage:this.workage,
						qualifications:this.qualifications,
						tags:this.tags.join(','),
						describe:this.describe,
						requirements:this.requirements,
						start_work_time:this.start_work_time,
						end_work_time:this.end_work_time
					}
				}).then((res) => {
					console.log(res)
					this.job_id = res.result.job_id
					uni.redirectTo({
						url:'post_detail?job_id='+this.job_id
					})			
				})
			}
		}
	}
</script>

<style>
	.apply_boxone{
		height: 90rpx;
		line-height: 90rpx;
		background-color: #efefef;
		font-size: 30rpx;
		padding-left: 38rpx;
		color: #333333;
	}
	
	.apply_box{
		height: 90rpx;
		line-height: 90rpx;
		padding-left: 38rpx;
		background-color: #FFFFFF;
		border-width: 2rpx;
		border-bottom-style: solid;
		border-color: #e6e6e6;
	}
	
	.con_text{
		color: #989898;
		font-size: 30rpx;
	}
	
	.con_infom{
		position: absolute;
		right: 35rpx;
		color: #333333;
		font-size: 30rpx;
		text-align: right;
		line-height: 90rpx;
		height: 90rpx;
		width: 750rpx;
	}
	
	.cancel_but{
		border-radius: 90rpx;
		border-width: 1rpx;
		border-style: solid;
		border-color: #3b73f6;
		text-align: center;
		height: 80rpx;
		width: 335rpx;
		line-height: 80rpx;
		color: #3b73f6;
		font-size: 30rpx;
	}
	
	.submit_but{
		border-radius: 90rpx;
		border-width: 1rpx;
		border-style: solid;
		background-color: #3b73f6;
		text-align: center;
		height: 80rpx;
		width: 335rpx;
		line-height: 80rpx;
		color: #FFFFFF;
		font-size: 30rpx;
	}
	
	.texthight_box{
		height: 200rpx;
		padding-left: 38rpx;
		background-color: #FFFFFF;
		border-width: 2rpx;
		border-bottom-style: solid;
		border-color: #e6e6e6;
	}
	
	.textarea_box{
		color: #333333;
		height: 260rpx;
		font: inherit;
		margin-top: 30rpx;
		margin-left: 40rpx;
		vertical-align: top;
		outline: none;
		white-space: pre-wrap;
	}
	
	.describe_box{
		height: 400rpx;
		border-width: 2rpx;
		border-bottom-style: solid;
		border-color: #e6e6e6;
		padding-left: 38rpx;
		background-color: #FFFFFF;
		padding-top: 35rpx;
	}
	
	.addBox{
		background-color: #FFFFFF;
	}
	
	.add_tag{
		color: #3b73f6;
	}
	
	.add_box{
		height: 90rpx;
		line-height: 90rpx;
		padding-left: 38rpx;
		background-color: #efefef;
	}
	
	.tag_text{
		color: #333333;
		font-size: 30rpx;
	}
	
	.tag_btn{
		background-color: #FFFFFF;
		padding-top: 40rpx;
		padding-left: 30rpx;
		padding-bottom: 67rpx;
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		/* align-content: flex-start; */
	}
	
	.tag_box{
		padding-left: 25rpx;
		padding-right: 25rpx;
		height: 54rpx;
		border-color: #3b73f6;
		border-width: 1rpx;
		border-style: solid;
		text-align: center;
		margin-right: 20rpx;
		border-radius: 8rpx;
		line-height: 54rpx;
		color: #3b73f6;
		font-size: 26rpx;
		margin-bottom: 25rpx;
	}
	
	.control_box{
		margin-top: 35rpx;
	}
	
	.imput_information{
		margin-top: 58rpx;
	}
	
	.modal_box{
		height: 500rpx !important;
	}
	
	.cu-modal.bottom-modal .cu-dialog{
		border-radius: 30rpx 30rpx 0 0 !important;
	}
	
	.apply_text{
		font-size: 35rpx;
		color: #333333;
		margin-left: 314rpx;
	}
	
	.cancel_text{
		font-size: 26rpx;
		color: #c6c6c6;
		margin-left: 245rpx;
		margin-top: 7rpx;
	}
	
	.linkman{
		margin-left: 15rpx;
		font-size: 30rpx;
		color: #333333;
	}
	
	.input_box{
		width: 684rpx;
		margin: auto;
		border-style: solid;
		border-color: #e5e5e5;
		border-width: 2rpx;
		height: 105rpx;
		border-radius: 10rpx;
		padding: 33rpx 25rpx;
	}
	
	.button_apply{
		width: 688rpx;
		margin: auto;
		margin-top: 180rpx;
		background-color: #3b73f6;
		color: #FFFFFF;
		font-size: 30rpx;
		text-align: center;
		line-height: 98rpx;
		height: 98rpx;
		border-radius: 15rpx;
	}
	
	
	.tagBox{
		height: 54rpx;
		position: relative;
		margin-bottom: 15rpx;
	}
	.close_box{
		position: absolute;
		top:-10rpx;
		right:10rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		background-color: #F43F3B;
		width: 20rpx;
		height: 20rpx;
		border-radius: 180rpx;
		line-height: 20rpx;
		font-weight: bold;
	}
	
</style>
